<template>
  <lay-layer v-model="layerRef.open"
             :title="layerRef.title"
             :area="layerRef.area"
             :shade-close="layerRef.shadeClose"
             :maxmin="layerRef.maxmin">
    <lay-container fluid="true" class="fly-container">


      <lay-card class="fly-search-card">
        <lay-form>
          <lay-form-item label="身份名称" prop="roleName" mode="inline">
            <lay-input v-model="queryUserRoleInfoParams.roleName"></lay-input>
          </lay-form-item>
          <lay-form-item label="主身份标志" prop="mainFlag" mode="inline">
            <lay-select v-model="queryUserRoleInfoParams.mainFlag">
              <lay-select-option value="" label="全部"></lay-select-option>
              <lay-select-option value="Y" label="是"></lay-select-option>
              <lay-select-option value="N" label="否"></lay-select-option>
            </lay-select>
          </lay-form-item>
          <lay-form-item label="有效标志" prop="validFlag" mode="inline">
            <lay-select v-model="queryUserRoleInfoParams.validFlag">
              <lay-select-option value="" label="全部"></lay-select-option>
              <lay-select-option value="Y" label="有效"></lay-select-option>
              <lay-select-option value="N" label="无效"></lay-select-option>
            </lay-select>
          </lay-form-item>

          <lay-button class="fly-button fly-button-search" style="margin-left: 20px" type="primary" size="sm"
                      @click=" reloadUserRoleInfoDate(1, flyLayPage.limit) ">
            <lay-icon class="layui-icon-search"></lay-icon>
            查询
          </lay-button>
        </lay-form>

      </lay-card>

      <div class="table-box">
        <lay-table :page="false"
                   :defaultToolbar="false"
                   :skin="'line'"
                   :columns=" userRoleInfoColumns "
                   :loading=" tableUserRoleInfoData.loading "
                   :data-source=" tableUserRoleInfoData.rows "
                   @change=" reloadUserRoleInfoDate ">
        </lay-table>


        <lay-page v-model="flyLayPage.page"
                  v-model:limit="flyLayPage.limit"
                  :layout="flyLayPage.layout"
                  :pages="flyLayPage.pages"
                  :limits="flyLayPage.limits"
                  theme="blue"
                  :total=" tableUserRoleInfoData.total"
                  @change="previousNextPage" style="margin-top: 15px"></lay-page>

      </div>
    </lay-container>

  </lay-layer>
</template>


<script setup lang="ts" name="userRoleInfoComponent">
import {ref, reactive} from 'vue';

import useUserRoleInfoComposable from '@/composables/admin/UserRoleInfoComposable';


const {
  flyLayPage,
  tableUserRoleInfoData,
  queryUserRoleInfoParams,

  /* 加载表格 */
  reloadUserRoleInfoDate,
  loadTableUserRoleInfoData
} = useUserRoleInfoComposable();


/* 弹窗 */
const layerRef = reactive<any>({
  open: false,
  title: '基础用户信息',
  area: ['98%', '98%'], // 宽度,  高度
  disabled: false,
  shadeClose: false,
  maxmin: false,
  submit: true,
})


//显示弹框
const open = (userId: string, nickName: string) => {
  queryUserRoleInfoParams.userId = userId;
  queryUserRoleInfoParams.deptCode = '';
  loadTableUserRoleInfoData(queryUserRoleInfoParams);
  layerRef.title = '【' + nickName + '】身份信息';
  layerRef.open = true;
};

/**
 * 上一页, 下一页
 * @param current
 * @param limit
 */
const previousNextPage = ({current = 1, limit = 10}) => {
  queryUserRoleInfoParams.page = current;
  queryUserRoleInfoParams.limit = limit;
  loadTableUserRoleInfoData(queryUserRoleInfoParams);
}

/**
 * 关闭按钮
 */
const onTapClose = () => {
  layerRef.open = false;
}
/**
 * 分页列表展示项
 */
const userRoleInfoColumns = [
  //{title: '昵称', key: 'nickName', ellipsisTooltip: true, width: '180px', align: 'center'},
  {title: '身份名称', key: 'roleName', ellipsisTooltip: true, align: 'center'},
  {title: '所属部门', key: 'deptTitle', ellipsisTooltip: true, align: 'center'},
  {title: '身份有效期起', key: 'startTime', ellipsisTooltip: true, width: '160px', align: 'center'},
  {title: '身份有效期止', key: 'endTime', ellipsisTooltip: true, width: '160px', align: 'center'},
  {
    title: '主身份标志 ', key: 'mainFlag', ellipsisTooltip: true, align: 'center',
    width: '120px',
    customSlot: function (obj: any) {
      return 'Y' === obj.data.mainFlag ? '是' : '否';
    }
  },
  {
    title: '有效标志 ', key: 'validFlag', ellipsisTooltip: true, align: 'center',
    width: '100px',
    customSlot: function (obj: any) {
      return 'Y' === obj.data.validFlag ? '是' : '否';
    }
  },
  // {title: '排序', key: 'orderNum', ellipsisTooltip: true, width: '100px', align: 'center'},
];


//在组件中，属性和方法，只能对当前template,
//外部需要使用的时候，需要使用 defineExpose 暴露出去给父组件
defineExpose({
  open,
  onTapClose
});

</script>


<style scoped>

</style>